<template>
	<div class="foot_button" :class="{ border: border }">
		<div class="foot_button_content"></div>
		<div class="foot_button_content foot">
			<div class="foot_button_content__inner">
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'FootButton',
		props: {
			border: {
				type: Boolean,
				default: true
			}
		}
	};
</script>

<style scoped lang="less">
	.foot_button {
		.foot_button_content {
			box-sizing: border-box;
			width: 100%;
			min-height: 116px;
			padding: 32px 40px;
			&.foot {
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: #fff;
			}
			.foot_button_content__inner {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		&.border {
			.foot_button_content.foot {
				border-top: 1px solid #EFF0F1;
			}
		}
	}
</style>
<style lang="less">
	.foot_button {
		position: relative;
		.foot_button_content__inner {
			&>.van-button + .van-button {
				margin-left: 32px;
			}
		}
	}
</style>
